<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
		<!-- 匹配显示 -->
		<style>
			/* 渲染没有完成时不展现 */
			[v-cloak]{
				display: none
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h1>{{hello}}</h1>
			<!-- 以优化后的效果进行展现 内部兼容了v-cloak -->
			<h1 v-text="msg"></h1>
			<!-- 以html解析之后的效果进行展现 -->
			<h3 v-html="html"></h3>
			<!-- v-pre 跳过vue的解析过程，直接展现数据-->
			<h3 v-pre>{{name}}</h3>
			<!-- v-once指令 元素只被解析一次 -->
			<h1 v-once>{{once}}</h1>
			<!-- 
				v-model 测试双向数据绑定
				1.服务器将数据给用户展现
				2.用户需要传数据给服务器
			 -->
			<input name="model" v-model="model" />
		</div>
		
		
		<script src="../js/vue.js"></script>
		<script>
			
			const app = new Vue({
				el:'#app',
				data:{
					hello:'vue案例',
					msg:'测试v-text指令',
					html:'<h1>html效果展示</h1>',
					once:'测试解析次数',
					model:'测试双向数据绑定'
				}
			})
			
		</script>
		
	</body>
</html>
